上一节我们介绍了表达式的概念，而表达式应用最多的场景，是实现页面的联动效果。

元素的联动是页面开发中很常见的功能之一，类似于：

联动配置项一般都是 表达式

控制组件的显隐，表单项的禁用状态等，看下面这个例子：

```schema: scope=”body” { “type”: “form”, “body”: [ { “type”: “radios”, “name”: “foo”, “label”: false, “options”: [ { “label”: “类型1”, “value”: 1 }, { “label”: “类型2”, “value”: 2 } ] }, { “type”: “input-text”, “name”: “text1”, “label”: false, “placeholder”: “选中 类型1 时可见”, “visibleOn”: “${foo == 1}” }, { “type”: “input-text”, “name”: “text2”, “label”: false, “placeholder”: “选中 类型2 时不可点”, “disabledOn”: “${foo == 2}” } ] }

上面例子我们实现了这个逻辑：每次选择选项1的时候，会触发选项2的source配置的接口重新请求，并返回不同的下拉选项。

是如何做到的？

实际上，所有初始化接口链接上使用数据映射获取参数的形式时，例如下面的query=${query}，在当前数据域中，所引用的变量值（即 query）发生变化时，自动重新请求该接口。

tip:

触发所引用变量值发生变化的方式有以下几种：

接口联动一般只适用于初始化接口，例如：

如果 api 地址中有变量，比如 /api/mock2/sample/${id}，amis 就不会自动加上分页参数，需要自己加上，改成 /api/mock2/sample/${id}?page=${page}&perPage=${perPage}

默认在变量变化时，总是会去请求联动的接口，你也可以配置请求条件，当只有当前数据域中某个值符合特定条件才去请求该接口。

```schema: scope=”body” { “title”: “”, “type”: “form”, “mode”: “horizontal”, “body”: [ { “label”: “选项1”, “type”: “radios”, “name”: “a”, “inline”: true, “options”: [ { “label”: “选项A”, “value”: 1 }, { “label”: “选项B”, “value”: 2 }, { “label”: “选项C”, “value”: 3 } ] }, { “label”: “选项2”, “type”: “select”, “size”: “sm”, “name”: “b”, “source”: { “method”: “get”, “url”: “/api/mock2/options/level2?a=${a}”, “sendOn”: “this.a === 2” }, “description”: “只有选项1选择B的时候，才触发选项2的source接口重新拉取” } ], “actions”: [] }

表单提交后会将返回结果合并到当前表单数据域，因此可以基于它实现提交按钮后显示结果，比如

```schema: scope=”body” { “type”: “form”, “api”: “/api/mock2/form/saveForm”, “title”: “查询用户 ID”, “body”: [ { “type”: “input-group”, “name”: “input-group”, “body”: [ { “type”: “input-text”, “name”: “name”, “label”: “姓名” }, { “type”: “submit”, “label”: “查询”, “level”: “primary” } ] }, { “type”: “static”, “name”: “id”, “visibleOn”: “typeof data.id !== ‘undefined’”, “label”: “返回 ID” } ], “actions”: [] }

amis 会将返回的 data 写入表单数据域，因此下面的 static 组件就能显示了。

还有一些组件特有的联动效果，例如 form 的 disabledOn，crud 中的 itemDraggableOn 等等，可以参考相应的组件文档。

联动很可能会出现跨组件的形式，思考下面这种场景：

有一个表单form组件，还有一个列表组件crud，我们想要把form提交的数据，可以用作crud的查询条件，并请求crud的接口，由于form和crud位于同一层级，因此没法使用数据链的方式进行取值。

```schema: scope=”body” [ { “title”: “查询条件”, “type”: “form”, “body”: [ { “type”: “input-text”, “name”: “keywords”, “label”: “关键字：” } ], “submitText”: “搜索” }, { “type”: “crud”, “api”: “/api/mock2/sample”, “columns”: [ { “name”: “id”, “label”: “ID” }, { “name”: “engine”, “label”: “Rendering engine” }, { “name”: “browser”, “label”: “Browser” }, { “name”: “platform”, “label”: “Platform(s)” }, { “name”: “version”, “label”: “Engine version” } ] } ]

我们进行两个调整：

更改配置后，提交表单时，如果有配置提交接口，会先请求提交，之后 amis 会寻找target所配置的目标组件，把form中所提交的数据，发送给该目标组件中，并将该数据合并到目标组件的数据域中，并触发目标组件的刷新操作，对于 CRUD 组件来说，刷新即重新拉取数据接口。

当然，crud组件内置已经支持此功能，你只需要配置crud中的filter属性，就可以实现上面的效果，更多内容查看 crud -> filter 文档。

我们再来一个例子，这次我们实现 两个 form 之间的联动

target属性支持通过配置参数来发送指定数据，例如："target" :"xxx?a=${a}&b=${b}"，这样就会把当前数据域中的a变量和b变量发送给目标组件

```schema: scope=”body” [ { “type”: “form”, “title”: “form1”, “mode”: “horizontal”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “label”: “Name”, “type”: “input-text”, “name”: “name” },

}, { “type”: “form”, “title”: “form2”, “name”: “form2”, “mode”: “horizontal”, “api”: “/api/mock2/form/saveForm”, “body”: [ { “label”: “MyName”, “type”: “input-text”, “name”: “name” },

} ]

上例中点击按钮会刷新target1和target2组件。

事实上，组件间联动也可以实现上述任意的 基本联动效果（显隐联动、接口联动等其他联动）。

若有收获，就点个赞吧

0 人点赞